<template>
  <div class="fml-grid fml-grid-expand" id="fmlprint">
    <el-table
      style="width: 100%;"
      size="mini"
      ref="fmlgrid"
      :height="gridHeight"
      element-loading-text="数据加载中"
      v-loading="tableLoading"
      element-loading-spinner="el-icon-loading"
      :stripe="!Config.stripe?true:false"
      :border="!Config.border?true:false"
      :emptyText="Config.emptyText||'暂无数据'"
      :default-sort="Config.defaultSort||{}"
      :tree-props="Config.tree?{children:Config.tree.children,hasChildren:Config.tree.hasChildren}:{children:'fmlchild',hasChildren:'fmlhaschild'}"
      :lazy="Config.tree?Config.tree.lazy:false"
      @row-click="clickRow"
      @current-change="radioChange"
      :highlight-current-row="Config.radioCheck||false"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      :data="tableData">

      <!-- 复选列 -->
      <el-table-column fixed align="center" type="selection" v-if="Config.checkBox" width="50"></el-table-column>

      <!-- 文本扩展列 -->
      <el-table-column type="expand" v-if="Config.tableConfig.expandTxtShow">
        <template slot-scope="scope">
          <el-form label-position="left" :inline="Config.inline||false">
            <el-form-item
              v-for="(item,index) in Config.tableConfig.expandTxtShow"
              :key="index"
              :label="item.label+':'">
              <!-- 如果是图片则与后台商议图片数据列添加一个showwImg字段或者前台对数据进行处理 -->
              <span style="margin-left:5px" v-if="!item.showImg">{{ scope.row[item.prop] }}</span>
              <img
                :src="scope.row[item.prop] "
                v-else
                @click="dialogVisible=true;showImgSrc=scope.row[item.prop]"
                :style="{height:Config.imgHeight||'40px'}">
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <!--   序号列 -->
      <el-table-column
        align="center"
        fixed
        v-if="Config.showNum"
        label="序号"
        type="index"
        width="55"
      ></el-table-column>

      <!-- 其他数据项 -->
      <el-table-column
        v-for="(item,index) in Config.tableConfig.columns"
        :key="index"
        :width="item.width || 'auto'"
        :min-width="item.minWidth || '100'"
        class="ellipsis"
        :class-name="item.className || ''"
        :align="item.align || 'left'"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.showTooltip||false"
        :sort-method="Config.sortMethod||null"
        :fixed="item.fixed" >
        <template slot-scope="scope" >
          <!-- 用图标代替文字 -->
          <i class="iconfont" :class="scope.row[item.icon]" v-if="item.fmlIcon" ></i>
          <el-tooltip class="item"  effect="dark" :content="scope.row[item.prop]" placement="top"  v-if="!item.showTooltip&&!item.fmlIcon&&((scope.row[item.prop]?scope.row[item.prop].length:0)/((item.width=='auto'?180:item.width)/14))>3" style="max-height:68px;display:block">
            <span :class="item.showClass?scope.row['className']:''">{{scope.row[item.prop]}}</span>
          </el-tooltip>
          <span v-else :class="item.showClass?scope.row['className']:''">{{scope.row[item.prop]}}</span>
          <img
            :src="scope.row[item.prop] "
            v-if="item.showImg"
            @click="dialogVisible=true;showImgSrc=scope.row[item.prop]"
            :style="{height:Config.imgheight||'40px'}">
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <slot name="operation"></slot>

    </el-table>

    <!-- 分页 -->
    <fml-pagination :total="total" v-if="total>0"></fml-pagination>

    <!-- 查看大图 -->
    <el-dialog title="查看大图" :visible.sync="dialogVisible">
      <img width="100%" :src="showImgSrc" alt>
    </el-dialog>

    <!-- 图表 -->
    <div class="fml-echart" ref="chartDialog">
      <el-dialog title="图表信息" :width="chartConfig?chartConfig.width:'600px'" :visible.sync="echartDialog" :before-close="setEchartDialog">
        <div :style="{'height':chartConfig?chartConfig.height:'300px'}" ref="fmlchart" style="width:100%" class="fml"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setEchartDialog" size="small">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * @param pageConfig 列表的默认配置
 * pageConfig:{
    stripe,//是否为斑马纹 false
    border,//是否有边框 false
    emptyText,//无数据默认展示 “暂无数据“
    tree:{children,hasChildren,lazy},//树形表格{children:fmlchild,hasChildren:fmlhaschild,lazy:false}
    checkBox,//是否为复选列 false
    showNum,//是否显示序号列 false
    imgheight,//列表中显示图片时的高度 40
    inline,//扩展列是否水平显示 false
    defaultSort,//默认排序规则 {prop:'',order:''}
    chartHeight,//弹窗显示当前所选数据的图表信息时图表弹窗的高度 300px
    noPage,//是否携带分页参数 true
    showSort,//是否携带排序参数 false
    extralParam,//除表单外的其他参数
    tableConfig:{expandTxtShow:[],cloumns:[{
      width,//列宽 auto
      minWidth,//列最小宽 100
      className,//列的自定义样式
      align,//列文本排列left center right
      prop,//列字段名
      label,//列展示名
      fixed,// 固定left right
      sortable,//是否显示排序 false  custom为后端排序
      icon,//如果使用图标那图标字段名
    }]},//列表配置项
    sortMethod()=>{},//列自定义排序规则
 *}
 ----------------------------------------------------*/
import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
import { State } from "vuex-class"
import echarts from "echarts"
@Component({
  components:{}
})

export default class fmlGrid extends Vue{
  tableChart:any= null; //图表
  tableData:any= null; //列表数据
  total:number= 0; //数据总数
  showImgSrc:string= "";//列图片的地址
  dialogVisible:boolean= false; //是否显示图片大图
  tableLoading:boolean= false; //列表加载中动画
  tableHeight:number= 16 * 37; //table的高
  gridHeight:number= 0; //初始高度（250包含头部，当前位置，按钮组，分页）

  @State updateTable:boolean;//列表刷新
  @State page:number;//当前页
  @State pageSize:number;//每页多少条
  @State searchParam:any;//表单查询参数
  @State sortField:string;//排序字段
  @State sortBy:string;//排序规则 ASC DESC
  @State echartDialog:boolean;//是否显示图表
  @State selectRows:Array<any>;//当前选中的行

  $refs:{
    chartDialog:HTMLDivElement,
    fmlgrid:any
  }

  @Prop()
  PageConfig: any; //列表配置信息
  @Prop()
  chartConfig:any;//图表的配置信息
  @Prop()
  echartOption:any;//图表的配置信息

  get Config():any{
    return this.PageConfig ;
  }
  get chartOption():any{
    return this.echartOption
  }
  get ApiParam():any{
    let page=this.Config.noPage?{}:{pageIndex: this.page,pageSize: this.pageSize}
    let sort=this.Config.showSort?{ sortBy: this.sortBy,sortField: this.sortField}:{}
    return {
      ...this.searchParam,
      ...page,
      ...sort
    }
  }

  @Watch ('searchParam',{deep:true})
  onSearchParam(){
    this.$store.commit('setPage', 1)//每次查询page都为1
  }
  @Watch ('ApiParam',{deep:true})
  onApiParam(){
    this.getTableData(); // 显示改变updateTable值时重新获取表格数据
  }
  @Watch ('updateTable')
  onUpdateTable(val){
    this.getTableData(); // 显示改变updateTable值时重新获取表格数据
  }
  @Watch ('pageSize')
  onPageSize() {
    this.tableHeight = this.pageSize * 37 + 37; //当前页的条数变化时高度重新计算
  }
  @Watch('echartDialog')
  onEchartDialog() {
    if (!this.echartDialog) return;
    this.initChart();//图表初始化
  }

  initChart() {
    let data=[]
    let name=[]
    if(this.selectRows&&this.selectRows.length>0){//选中行的数据绘制图表
      this.selectRows.map(item=>{
        data.push(item[this.chartConfig.chartkey[0]])
        name.push(item[this.chartConfig.chartkey[1]])
      })
      this.chartOption.series[0].data=data
      this.chartOption.xAxis[0].data=name
    }else if(this.tableData&&this.tableData.length>0){ //当前列表所有数据绘制图表
      this.tableData.map(item=>{
        data.push(item[this.chartConfig.chartkey[0]])
        name.push(item[this.chartConfig.chartkey[1]])
      })
      this.chartOption.series[0].data=data
      this.chartOption.xAxis[0].data=name
    }
    // setTimeout(() => {
      this.$nextTick(()=>{
      let idchart = this.$refs.chartDialog.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
        this.tableChart = echarts.init(idchart);
        // 把配置和数据放这里
        this.tableChart.setOption(this.chartOption);
      })
    // }, 200);
  }
  // 图表
  setEchartDialog() {
    this.$store.commit("setEchartDialog", false);
  }
  // 排序改变
  sortChange(data) {
    const sortProp = this.Config.defaultSort.find(i => i.prop === data.prop);
    const sortField = sortProp ? sortProp.prop : data.prop;
    const sortBy = data.order === "ascending" ? "ASC" : "DESC";
    this.$store.commit("setSort", { sortField, sortBy });
  }
  // 行单机
  clickRow(row) {
    if (this.Config.checkBox) {
      this.$refs.fmlgrid.toggleRowSelection(row); //响应复选框check事件
    }
  }
  // 将复选中的数据放入容器中
  selectionChange(setSelectRows) {
    this.$store.commit("setSelectRows", setSelectRows);
  }
  // 单选
  radioChange(setSelectRows) {
    if (this.Config.selection || !this.Config.radioCheck) return;
    let rows = [];
    rows.push(setSelectRows);
    this.$store.commit("setSelectRows", rows);
  }
  async getTableData() {
    let paramsfml={...this.ApiParam,...this.Config.extralParam}
    this.tableLoading = true;
    const [err, res] = await this.$fetchService[this.Config.fetchMethod?'fetchPost':'fetchGet'](paramsfml,this.Config.Api,false);
    if (err) {
      this.tableLoading = false;
      return this.$message({message:err.message || "获取数据出错",type:'error',showClose:true});
    }
    if (!res) {
      this.tableLoading = false;
      return this.$message({message:"当前接口返回数据格式出错",type:'error',showClose:true});
    }
    this.tableData = this.Config.DataHandler(res.data, res);
    this.total = res.totalItem;//总数字段
    this.tableLoading = false;
    // 数据为空不给导出
    this.$store.commit('setOutImport',res.data.length > 0)
  }
  // },
  mounted() {
    let that = this;
    var  height=that.Config.formHeight?that.Config.formHeight:0;
    this.$nextTick(()=>{
      that.gridHeight = document.body.clientHeight -height;
    })
    window.onresize = function() {
      that.gridHeight = document.body.clientHeight -  height;
    };
  }
  created() {
    this.$store.commit('setOutImport',true)
    this.$store.commit("resetTable");
  }
}
// });
</script>

